<template>
  <div>
    <div class="scctj_box">
      <div class="close" @click="close">
        <a-icon type="close" size="20" />
      </div>
      <ul>
        <li>
          <span class="inp_tit">选择用户：</span>
          <!-- <a-input v-model="xzyh" placeholder="请输入用户名称" /> -->

          <a-select
            showSearch
            allowClear
            placeholder="请选择进件客户"
            optionFilterProp="children"
            style="width: 300px"
            @search="khmcSearch"
            @change="handleChange"
            @focus="handleFocus"
            @blur="handleBlur"
            :filterOption="filterOption"
            :defaultValue="tjkh_value"
            :disabled="$parent.editval!=''?true:false"
          >
            <a-select-option
              v-for="(item,i) in selectlist"
              :key="i"
              :value="item.GSMC"
              :data-sqdwid="item.SQDWID"
              @click="getsqdwid(item.SQDWID)"
            >{{item.GSMC}}</a-select-option>
          </a-select>
        </li>
        <li>
          <span class="inp_tit">推荐值：</span>
          <a-input v-model="tjval" placeholder="请输入推荐值" />
        </li>
        <li>
          <span class="inp_tit">截止日期：</span>
          <!-- <a-input placeholder="请输入用户名称" /> -->

          <a-date-picker :placeholder="jz_date!=''?jz_date:'请输入截止日期'" @change="onChange" />
        </li>
        <li>
          <a-button type="primary" @click="subaddtj">提交</a-button>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import qs from "qs";
import moment from "moment";
export default {
  data() {
    return {
      tjval: "",
      xzyh: "",
      jz_date: "请输入截止日期",
      selectlist: [],
      qy_sqdwid: "",
      tjkh_value: "",
      idkey: ""
    };
  },

  methods: {
    moment,
    close() {
      this.$parent.addscctjflag = false;
      this.$parent.editval = "";
    },
    onChange(date, dateString) {
      console.log(date, dateString);
      this.jz_date = dateString;
    },
    subaddtj() {
      if (this.$parent.editval != "") {
        this.axios
          .post(
            "suggest/suggestEdit.php",
            qs.stringify({
              id: this.idkey,
              // type: this.$parent.path,
              value: this.tjval,
              expire: this.jz_date
            })
          )
          .then(res => {
            console.log(res);
            if (res.data.code == 303) {
              this.$parent.addscctjflag = false;
              this.$parent.editval = "";
              this.$parent.getsuggestList(this.$parent.pagination);

              this.$notification["success"]({
                message: "成功",
                description: res.data.msg
              });
            } else {
              this.$notification["error"]({
                message: "失败",
                description: res.data.msg
              });
            }
          });
      } else {
        this.axios
          .post(
            "suggest/suggestAdd.php",
            qs.stringify({
              userid: this.qy_sqdwid,
              type: this.$parent.path,
              value: this.tjval,
              expire: this.jz_date
            })
          )
          .then(res => {
            console.log(res);
            if (res.data.code == 303) {
              this.$parent.addscctjflag = false;
              this.$parent.editval = "";
              this.$parent.getsuggestList(this.$parent.pagination);

              this.$notification["success"]({
                message: "成功",
                description: res.data.msg
              });
            } else {
              this.$notification["error"]({
                message: "失败",
                description: res.data.msg
              });
            }
          });
      }
    },
    getxzyh(keywords) {
      this.axios
        .post(
          "suggest/userList.php",
          qs.stringify({
            keywords: keywords
          })
        )
        .then(res => {
          console.log(res);
          if (res.data.code == 303) {
            this.selectlist = res.data.result;
          } else {
            this.selectlist = [];
          }
        });
    },

    getsqdwid(id) {
      console.log(id);
      this.qy_sqdwid = id;
    },
    handleChange(value) {
      console.log(`selected ${value}`);
    },
    handleBlur() {
      console.log("blur");
    },
    handleFocus() {
      console.log("focus");
    },
     khmcSearch(value) {
      this.getxzyh(value);
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    }
  },

  created() {
    this.getxzyh();
    if (this.$parent.addscctjflag) {
      this.tjval = this.$parent.editval.value;
      this.tjkh_value = this.$parent.editval.GSMC;
      this.idkey = this.$parent.editval.id;
      this.jz_date = this.$parent.editval.expire;
    } else {
      this.$parent.editval = "";
    }
  }
};
</script>

<style lang='less'>
.scctj_box {
  width: 40%;
  height: 300px;
  background: #fff;
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  padding: 30px;
  ul {
    li {
      margin: 15px 0;
      .inp_tit {
        width: 100px;
        display: inline-block;
        text-align: right;
      }
      input {
        width: 300px;
      }
    }
  }
  .close {
    //   text-align: right;
  }
}
</style>
